<!DOCTYPE html>
<html>

	<head lang="en">
		<title>找攻略</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<script src="/js/jquery/jquery.min.js"></script>
		<link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
		<link rel="stylesheet" href="/css/reset.css" />
		<link rel="stylesheet" href="/css/myStrategyComment.css" />
        <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
        <script src="/js/plugins/dialog/dialog.min.js"></script>
		<link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
        <script src="../js/plugins/jquery-form/jquery.form.js"></script>
		<script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
        <script src="/js/jquery-validation/jquery.validate.min.js"></script>
        <script src="/js/jquery-validation/additional-methods.js"></script>
        <script src="/js/common.js"></script>

        <script>
            $(function () {
                //星级评价,默认为0
                var star = 0;
                //点击五角星,需要使用动态拼接
                $(".star").on("click","i",function () {
                    star = $(this).data("num");
                    //回显
                    //先清空再拼接
                    $(".star i").remove();
                    for(var i=0; i<star; i++){
                        $(".star").append('<i class="fa fa-star fa-lg" data-num="'+(i+1)+'"></i>');
                    }
                    for(var j=star;j<5;j++){
                        $(".star").append($('<i class="fa fa-star-o fa-lg" data-num="'+(j+1)+'"></i>'));
                    }
                })

                //标签的点击事件
                $("#detailForm div label").change(function () {
                    //检查多选标签
                    var input = $(this).find("input");
                    //attr无效
                    if(input.prop('checked')){
                        $(this).addClass("active");
					}else {
                        $(this).removeClass("active");
					}
                })


                //图片的上传
                //jQuery.ajaxSettings.traditional = true 数组提交时不会带[]
                var ele = null;//点击发生的元素
                $(".imgs .rect").click(function () {
                    // 打开文件上传选择器
                    $("#imgForm input[name='pic']").click();
                    ele = this;
                });

                // 设置文件上传值改变事件
                $("#imgForm input[name='pic']").change(function () {
                    // 判断是否有选择图片
                    if ($("#imgForm input[name='pic']").val()){
                        // 使用ajax的方式上传图片
                        $("#imgForm").ajaxSubmit(function (data) {
                            // 判断图片是否上传成功
                            if (data.status == 1){
                                // 图片上传成功
                                $(ele).html("").append('<img name="images" src="'+data.url+'">');
                            } else {
                                // 注册失败, 弹出注册失败提示信息
                                $(document).dialog({
                                    titleText: '温馨提示',
                                    content: data.msg
                                });
                            }
                        });
                    }
                });

                //提交保存操作
                // 获取当前用户
                var user = sessionStorage.getItem("user");
                // 设置表单提交的action
                $("#detailForm").attr("action", "/users/"+user.id+"/strategyComments");
                // 获取地址栏上的攻略的id
                var strategyId = getParams().strategyId;
                //点击提交评价按钮提交表单
                $("#submitBtn").click(function () {
                    if(validateForm()){
                        $("#detailForm").submit();
                    }
                });
                //将表单的提交变成异步请求,并添加提交的字段
                $("#detailForm").ajaxForm({
                    beforeSubmit:function (arr) {
                        // 给表单提交参数数组中添加额外需要提交的参数
                        arr.push({name:"strategy.id",value:strategyId});// 攻略id
                        arr.push({name:"star",value:star});// 星级评价
                        //arr.push({name:"content",value:$("textarea[name='content']").val()});// 点评文本内容

                        //点评的图片
                        var images = [];
                        images=$.map($(".imgs .rect img"),function (ele,index) {
                            //不能使用ele.src返回地址,会带有http://localhost
                            return $(ele).attr("src");
                        });
                        arr.push({name:"images",value:images});// 图片地址数组
                        return true;
                    },
                    // 表单提交成功的回调函数
                    success:function (data) {
                        if (data.success){
                            // 保存成功跳转到攻略界面
                            window.location.href = "/strategyCatalogs.html?id="+strategyId;
                        } else {
                            // 如果不成功, 则弹框提示服务器繁忙, 请稍后再试
                            $(document).dialog({
                                titleText: '温馨提示',
                                position:"bottom",
                                content: data.msg
                            });
                        }
                    }
                })

            })
            //表单验证方法,当验证成功时返回true,失败时返回false
            function validateForm() {
                return $("#detailForm").validate({
                    rules: {
                        content: {
                            required: true
                        },
                        myTags: {
                            //自定义校验
                            regex: "^[^,]{1,8}(?:,[^,]{1,8})*$"
                        }
                    },
                    messages: {
                        content:{
                            required:"请输入内容"
                        },
                        myTags: {
                            regex: "格式错误"
                        }
                    }
                }).form();
            }
        </script>

        <style>
            .error{
                color:red;
            }
        </style>
    </head>

	<body>
	<div class="search-head">
		<div class="row nav-search">
			<div class="col">
				<a href="javascript:window.history.go(-1)">
					<span><i class="fa fa-chevron-left" ></i></span>
				</a>

			</div>
			<div class="col">
				<span>点评</span>
			</div>
			<div class="col"></div>
		</div>
	</div>

	<div class="comment">
		<div class="container star">
			<p>你对该旅游地的评价</p>
			<i class="fa fa-star-o fa-lg" data-num="1"></i>
			<i class="fa fa-star-o fa-lg" data-num="2"></i>
			<i class="fa fa-star-o fa-lg" data-num="3"></i>
			<i class="fa fa-star-o fa-lg" data-num="4"></i>
			<i class="fa fa-star-o fa-lg" data-num="5"></i>
		</div>
		<hr />
		<div class="container tag">
            <!--添加提交表单,使用ajaxForm填入提交数据-->
            <form id="detailForm" method="post">
			<p>请为该旅游地选择合适的标签（大家都在评）</p>
			<div class="btn-group-toggle" data-toggle="buttons">
				<label class="btn btn-outline-danger">
					<input type="checkbox" name="tags" autocomplete="off" value="价格便宜"> 价格便宜
				</label>
				<label class="btn btn-outline-danger">
					<input type="checkbox" name="tags" autocomplete="off" value="住宿方便"> 住宿方便
				</label>
				<label class="btn btn-outline-danger ">
					<input type="checkbox" name="tags" autocomplete="off" value="旅游景点多"> 旅游景点多
				</label>
				<label class="btn btn-outline-danger ">
					<input type="checkbox" name="tags" autocomplete="off" value="适合拍照">适合拍照
				</label>
				<label class="btn btn-outline-danger">
					<input type="checkbox"  name="tags" autocomplete="off" value="吃的很多">吃的很多
				</label>
				<label class="btn btn-outline-danger">
					<input type="checkbox"  name="tags" autocomplete="off" value="交通不方便">交通不方便
				</label>
			</div>

			<p>添加你自己的标签</p>
			<input name="myTags" id="myTags" class="form-control"  placeholder="请使用逗号隔开标签，每个标签不超8个字"   />

			<p>更多评价内容</p>
                <textarea name="content" id="content" class="form-control" rows="5" placeholder="请填写你对该旅游地的评价"></textarea>
            </form>
		</div>
		<div class="container imgs ">
			<p>上传图片</p>

			<div class="row">
				<form id="imgForm" action="/images" method="post" enctype="multipart/form-data">
					<input type="file" style="display: none" name="pic"/>
				</form>
				<div class="col-3 rect">
					<span>上传</span>
				</div>
				<div class="col-3 rect">
					<span>上传</span>
				</div>
				<div class="col-3 rect">
					<span>上传</span>
				</div>
				<div class="col-3 rect">
					<span>上传</span>
				</div>
				<div class="col-3 rect">
					<span>上传</span>
				</div>
			</div>
		</div>

	</div>



	<div class="operation">
		<button class="btn" onclick="window.history.go(-1)">放弃评价</button>
		<button class="btn" id="submitBtn">提交评价</button>
	</div>

	</body>


</html>